import { memo, useCallback, useState } from "react";

const Buttons = memo(({ title, handleClick }) => {
  console.log(`执行Buttons${title}`);
  return <button onClick={handleClick}>{title}</button>;
});

function App() {
  const [count, setCount] = useState(0);
  const [isShow, setIsShow] = useState(false)
  const handleShow = () => {
    console.log("执行isShow")
    setIsShow(!isShow)
  }
  const increament1 = () => {
    console.log("执行increament1");
    setCount(count + 1);
  };
  const increament2 = useCallback(() => {
    console.log("执行increament2");
    setCount(count + 1);
  }, [count]);

  return (
    <div className="App">
      <div>次数:{count}</div>
      <Buttons title="按钮一" handleClick={increament1}></Buttons>
      <Buttons title="按钮二" handleClick={increament2}></Buttons>
      <button onClick={handleShow}>显示</button>
    </div>
  );
}

export default App;
